﻿@page "/components/snackbar"


@inject MudBlazor.ISnackbar Snackbar

<DocsPage>
    <DocsPageHeader Title="Snackbar" />
    <DocsPageContent>

        <DocsPageSection>
            <MudText Typo="Typo.h6" GutterBottom="true">Note</MudText>
            <MudText>The Snackbar is dependant on <CodeInline Class="docs-code-tertiary">ISnackbar</CodeInline> service and <CodeInline>MudSnackbarProvider</CodeInline>.</MudText>
            <MudText>Check the <MudLink Href="/getting-started/installation">Installation</MudLink> page for instructions regarding default setup.</MudText>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>This is the simplest way of using the <CodeInline>Snackbar</CodeInline>. It provides the user with a temporary closable <CodeInline>Snackbar</CodeInline></Description>
            </SectionHeader>
            <SectionContent Code="SnackbarUsageExample">
                <SnackbarUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Html in messages">
                <Description>
                    Snackbar messages are rendered as HTML using <CodeInline>MarkupString</CodeInline>.<br />
                    However, make sure not to use user-provided input, as that's not very secure.
                </Description>
            </SectionHeader>
            <SectionContent Code="SnackbarHtmlInMessageExample" ShowCode="false">
                <SnackbarHtmlInMessageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Alerts and Severity">
                <Description>
                    By default, no <CodeInline>Severity</CodeInline> property has to be passed and the snackbar uses the normal level.<br />
                    To change the snackbar into an alert snackbar, simply pass down the <CodeInline>Severity</CodeInline> enum after the message.
                </Description>
            </SectionHeader>
            <SectionContent Code="SnackbarSeverityExample" ShowCode="false">
                <SnackbarSeverityExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Configuration">
                <Description>The Snackbar's default behavior can be changed in two ways, either globally when the service is registered or by passing down the <CodeInline>SnackbarConfiguration</CodeInline> class with the changes you want to make.</Description>
            </SectionHeader>
            <SectionHeader>
                <SubTitle>1. Global Service Settings</SubTitle>
                <Description>In either <CodeInline>Program.Main</CodeInline> or <CodeInline>Startup.cs</CodeInline>, depending on what kind of project you have. See <MudLink Href="/getting-started/installation">installation page</MudLink> for more information regarding this.</Description>
            </SectionHeader>
            <MarkdownSnackbarConfigurationService />
            <SectionHeader>
                <SubTitle>2. Per Snackbar</SubTitle>
                <Description>
                    This can be done in many ways, below is one of them and we will continue to use it further down on this page.<br />
                    Below, we pass along a modified configuration that differs from our globally-set <CodeInline>ShowCloseIcon</CodeInline>. In this case, it's also the Snackbar's default value.
                </Description>
            </SectionHeader>
            <SectionContent Code="SnackbarConfigurationExample">
                <SnackbarConfigurationExample />
            </SectionContent>
        </DocsPageSection>

        <MudDivider Class="my-16" Style="opacity:0;" />

        <DocsPageSection>
            <SectionHeader Title="Snackbar Position">
            </SectionHeader>
            <SectionContent Code="SnackbarPositionExample" ShowCode="false" Block="true">
                <SnackbarPositionExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Snackbar Variants">
            </SectionHeader>
            <SectionContent Code="SnackbarVariantsExample" ShowCode="false">
                <SnackbarVariantsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Close after navigation">
            </SectionHeader>
            <SectionHeader>
                <Description>
                    The snackbar's default behavior is to remain visible until the user closes the snackbar. When <CodeInline>CloseAfterNavigation</CodeInline> is set to <CodeInline>true</CodeInline> a snackbar will close after a user navigates away from the current page. Click both snackbars in the example and then navigate to another component to see this example in action.
                </Description>
            </SectionHeader>
            <SectionContent Code="SnackbarNavigationExample" ShowCode="false">
                <SnackbarNavigationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Action Handling">
            </SectionHeader>
            <SectionHeader>
                <Description>
                    A snackbar becomes clickable when a handler is defined in the <CodeInline>OnClick</CodeInline> property of the <CodeInline>SnackbarOptions</CodeInline> object.
                </Description>
            </SectionHeader>
            <SectionContent Code="SnackbarOnClickExample" ShowCode="false">
                <SnackbarOnClickExample />
            </SectionContent>
            <SectionHeader>
                <Description>
                    Alternatively, the <CodeInline>OnClick</CodeInline> handler can be attached to an action button by setting a label in the <CodeInline>Action</CodeInline> property.
                </Description>
            </SectionHeader>
            <SectionContent Code="SnackbarActionButtonExample" ShowCode="false">
                <SnackbarActionButtonExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Require Interaction">
                <Description>With the <CodeInline>RequireInteraction</CodeInline> property set to true, the snackbar will not disappear until the user interacts with it.</Description>
            </SectionHeader>
            <SectionContent Class="pa-0" Code="SnackbarRequireInteractionExample" ShowCode="false">
                <SnackbarRequireInteractionExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="No Icon">
            </SectionHeader>
            <SectionContent Code="SnackbarNoIconExample" ShowCode="false">
                <SnackbarNoIconExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Icon">
            </SectionHeader>
            <SectionContent Code="SnackbarCustomIconExample" ShowCode="false">
                <SnackbarCustomIconExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
